<template>
	<div :style="{'height': height + 'px', 'width': width + 'px', 'background-image': 'url(' + require('@/assets/background.jpg') + ')'}"
		style="margin-top: 120px; background-repeat:no-repeat; background-position:top center;">
		<br /><br /><br /><br />
		<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
			<h3 class="login-title">贵师微校园管理系统</h3>
			<el-form-item label="账号" prop="username">
				<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
			</el-form-item>
			<el-row style="text-align:right;">
				<el-col :span="18">
					<el-button type="primary" v-on:click="onSubmit('loginForm')" style="width:100px;">
						登录<i style="margin-left:10px;" class="fa-sign-in fa fa-lg"></i>
					</el-button>
				</el-col>
				<el-col :span="6">
					<el-tooltip content="统一身份认证">
						<el-link type="primary" href="http://authserver.gznu.edu.cn/authserver/login?service=http://172.19.1.146:8112/index.html">
							<img :src="require('@/assets/logo.png')" style="width:40px; height:40px;" /><br/>
						</el-link>
					</el-tooltip>
				</el-col>
			</el-row>
		</el-form>
		<div class="footer" style="position:absolute; bottom:30px; right: 60px;">
			<div style="font-size: 12px; color: #ccc;">
				Copyright <i class="fa fa-copyright" style="margin-right:10px;"></i><span>贵州师范大学网络与信息中心</span>
			</div>
		</div>
	</div>
</template>

<script>
import axios from 'axios';
import qs from 'qs'
import request from '@/utils/request';
import { getStore, setStore, clearStore } from '@/utils/storage'
import { getUser, setUser, clearUser } from '@/utils/auth';
import { Message, MessageBox } from 'element-ui'
import Common from '@/utils/Common.js';

export default {
	data() {
		return {
			form: {
				username: '',
				password: ''
			},
			rules: {
				username: [{
					required: true, message: '账号不可为空', trigger: 'blur'
				}],
				password: [{
					required: true, message: '密码不可为空', trigger: 'blur'
				}]
			}
		}
	},
	methods: {
		onSubmit: function(formName) {
			var self = this;
			this.$refs[formName].validate((valid) => {
				if(valid) {
					var param = {
						username: self.form.username,
						password: self.form.password
					};
					var loading = self.$loading({
						lock: true,
						text: 'Loading',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.7)'
					});
					request({
						method: 'POST',
						url: 'api/form/jwt',
						data: param,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						}
					}).then(data => {
						let element = data.element;
						setUser(element);
						window.location.href = '/';
						loading.close();
					}).catch(error => {
						loading.close();
						MessageBox.alert(error.detail.msg, '错误', {
							confirmButtonText: '确定',
							type: 'error'
						});
					});
				}
			});
		}
	},
	computed: {
		height() {
			return window.innerHeight - 150;
		},
		width() {
			return window.innerWidth - 30;
		}
	},
	created() {
		let self = this;
		let ticket = Common.getQueryVariable(window.location.search, 'ticket');
		if(ticket) {
			let loading = self.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			});
			request({
				url: 'api/cas/jwt',
				params: { ticket },
				method: 'get'
			}).then(data => {
				let element = data.element;
				setUser(element);
				window.location.href = '/';
			}).catch(err => {
				loading.close();
				console.error(err);
			});
		}
	}
}
</script>

<style scoped>
.login-box {
	border: 1px solid #DCDFE6;
	width: 350px;
	margin: auto;
	padding: 35px 35px 15px 35px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow: 0 0 25px #909399;
	background-color: #FFFFFF;
}
.login-title {
	text-align: center;
	margin: 0 auto 40px auto;
	color: #303133;
}
</style>
